<template>
  <div>
    <render-table
      ref="table"
      :apiUrl="bidList"
      :tableColumn="tableColumn"
      :otherConfig="otherConfig"
      :setupConfig="setupConfig"
      :searchReset="searchReset"
      @del="del"
    >
      <template v-slot:setup="{ row }">
        <el-button size="medium" type="text" @click="openOrderList(row)"
          >查看</el-button
        >
        <el-button size="medium" type="text" @click="handleImport(row)"
          >导入报价单</el-button
        >
      </template>
    </render-table>
    <DialogView
      v-if="orderListDialog.visible"
      :dialogTitle="orderListDialog.dialogTitle"
      :visible="orderListDialog.visible"
      :popupWidth="'900px'"
      :cancelButton="false"
      @submitData="orderListDialog.visible = false"
    >
      <orderList :searchReset="orderSearchReset"></orderList>
    </DialogView>
    <DialogView
      :dialogTitle="importDialog.dialogTitle"
      :visible="importDialog.visible"
      @submitData="importData"
      @handleClose="handleClose"
      v-if="importDialog.visible"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="importForm"
        label-width="120px"
      >
        <el-form-item label="报价单文件">
          <div style="display: flex">
            <el-input
              v-model="importForm.fileName"
              placeholder="文件名"
              readonly
              clearable
            ></el-input>
            <el-upload
              action="#"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="beforeUpload"
            >
              <el-button type="text">上传文件</el-button>
            </el-upload>
          </div>
          <el-button type="text" @click="handleExport('other')"
            >下载报价模板</el-button
          >
        </el-form-item>
        <el-form-item label="盖章文件">
          <div style="display: flex">
            <el-input
              v-model="importForm.imgName"
              placeholder="文件名"
              readonly
              clearable
            ></el-input>
            <el-upload
              action="#"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="beforeUploadImg"
            >
              <el-button type="text">上传文件</el-button>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
    </DialogView>
  </div>
</template>
        
        <script>
import { bidList, supplierUploadOtherOrder } from "@/api/supplier/api";
import orderList from "../orderList.vue";

export default {
  components: {
    orderList,
  },
  props: {},
  name: "other",
  data() {
    return {
      importForm: {
        fileName: "",
        uploadFile: {},
        imgName:'',
        imgFile: {},
      },
      importDialog: {
        visible: false,
        dialogTitle: "导入报价单",
      },
      orderSearchReset: {
        type: "",
        orderId: "",
      },
      orderListDialog: {
        visible: false,
        dialogTitle: "订单详情信息",
      },
      searchReset: {
        type:'商品类'
      },
      setupConfig: {},
      dict: {},
      otherConfig: {
        list: "rows",
      },
      bidList,
      tableColumn: [
        { prop: "materialTypeName", label: "订单类型", width: "250" },
        { prop: "orderName", label: "订单名称", width: "250" },
        { prop: "orderId", label: "订单编号", width: "250" },
        { prop: "purchaseName", label: "采购员", width: "250" },
        //   { prop: "purchaseName", label: "采购员联系方式" },
        { prop: "endTime", label: "截止日期", width: "250" },
      ],
      rowData:{}
    };
  },
  created() {},
  methods: {
    handleExport(type) {
      this.download(`/file/download/supplier/store`, {orderId:this.rowData.orderId}, `${this.rowData.orderName}的报价单.xlsx`);
    },
    handleImport(row) {
        this.rowData = row
      this.importDialog.visible = true;
      this.importDialog.dialogTitle = "导入报价单";
    },
    openOrderList(row) {
      this.orderSearchReset.type = row.materialTypeName;
      this.orderSearchReset.orderId = row.orderId;
      this.orderListDialog.visible = true;
    },
    //上传前预操作
    beforeUpload(file, fileList) {
      if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
        this.$notify.error({
          title: "错误",
          message: "上传文件只能为excel文件，且为xlsx,xls格式",
        });
      } else {
        this.importForm.fileName = file.name;
        this.importForm.uploadFile = file.raw;
      }
    },
    beforeUploadImg(file, fileList) {
        console.log('file',file)
      if (file.raw.type.indexOf("image/") == -1) {
        this.$notify.error({
          title: "错误",
          message: "文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。",
        });
      } else {
        this.importForm.imgName = file.name;
        this.importForm.imgFile = file.raw;
      }
    },
    //导入订单
    importData() {
      let formData = new FormData();
      formData.append("file ", this.importForm.uploadFile);
      formData.append("photo ", this.importForm.imgFile);
      const orderId = this.rowData.orderId
      formData.append("orderId", orderId);
      supplierUploadOtherOrder(formData).then(() => {
          this.importDialog.visible = false;
          this.reset()
          this.$message({
            type: 'success',
            message: '导入报价单成功'
          });
        });
    },
    handleClose() {
      this.importDialog.visible = false;
      this.reset()
    },
    // 表单重置
    reset() {
      this.importForm = {
        fileName: "",
        uploadFile: {},
        imgName:'',
        imgFile: {},
      };
      this.resetForm("importForm");
    },
  },
};
</script>
        